<script setup>
import { ref, onMounted } from 'vue'
import Echarts from './echarts.vue'
import { ElMessage } from 'element-plus'
import { getBaseData } from '@/api/dashboard'
//    定义接收返回数据的对象
const baseData = ref('')
//    定义时间选择器绑定的数据
const itemData = ref([])
//   new Date()获取当前时间转成yyyy-mm-dd格式
const currentDate = new Date()
const year = currentDate.getFullYear()
const month = ('0' + (currentDate.getMonth() + 1)).slice(-2)
const day = ('0' + currentDate.getDate()).slice(-2)
const formattedDate = year + '-' + month + '-' + day
// console.log(formattedDate)
//    定义获取基础数据、今日简报、待办事项数据的参数
const params = {
  beginCreateTime: '2023-05-17',
  endCreateTime: formattedDate
}
//    获取基础数据、今日简报、待办事项数据
const getBaseDatas = async () => {
  const res = await getBaseData(params)
  // console.log(res)
  if (res.code === 200) {
    baseData.value = res.data
  } else {
    ElMessage({
      message: res.msg,
      type: 'error',
      duration: 1000
    })
  }
}

//   搜索
const search = () => {
  try {
    if (itemData.value.length !== 0) {
      params.beginCreateTime = itemData.value[0]
      params.endCreateTime = itemData.value[1]
      // console.log(params.beginCreateTime, params.endCreateTime)
      getBaseDatas()
    }
  } catch (error) {
    console.log(error)
  }
}

//   刷新
const refresh = () => {
  params.beginCreateTime = '2023-05-17'
  params.endCreateTime = formattedDate
  getBaseDatas()
}

//    加载完就调用
onMounted(() => {
  getBaseDatas()
})

const tableData = [
  {
    date: '2',
    name: '小明',
    address: '财务部',
    clue: '5',
    clues: '24.36'
  },
  {
    date: '3',
    name: '小红',
    address: '行政部',
    clue: '8',
    clues: '18.49'
  },
  {
    date: '4',
    name: '小黄',
    address: '教育部',
    clue: '3',
    clues: '22.52'
  },
  {
    date: '5',
    name: '小徐',
    address: '教研部',
    clue: '7',
    clues: '45.13'
  },
  {
    date: '5',
    name: '小王',
    address: '研发一部',
    clue: '9',
    clues: '31.11'
  }
]
</script>

<template>
  <div class="dashboard">
    <div class="content">
      <div class="t-content">
        <el-col :span="12">
          <div class="t-content-title">
            <span>选择日期:</span>
            <el-date-picker
              v-model="itemData"
              value-format="YYYY-MM-DD"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </div>
        </el-col>
        <div class="btn">
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button icon="RefreshRight" @click="refresh">刷新</el-button>
        </div>
      </div>
      <div class="b-content">
        <p>基础数据</p>
        <div class="b-l-content">
          <div class="basic-data">
            <div class="clue-number">
              <div class="clue-number-title">
                <span>线索数量</span>
                <h4>{{ baseData?.clueNumber }}</h4>
              </div>
              <img src="@/assets/index_home/clue.png" />
            </div>
          </div>
          <div class="basic-data">
            <div class="business-opportunity-number">
              <div class="clue-number-title">
                <span>商机数量</span>
                <h4>{{ baseData?.commercialNumber }}</h4>
              </div>
              <img src="@/assets/index_home/opport.png" />
            </div>
          </div>
          <div class="basic-data">
            <div class="custom-number">
              <div class="clue-number-title">
                <span>客户数量</span>
                <h4>{{ baseData?.clientNumber }}</h4>
              </div>
              <img src="@/assets/index_home/customer.png" />
            </div>
          </div>
          <div class="basic-data">
            <div class="sale-number">
              <div class="clue-number-title">
                <span>销售金额</span>
                <h4>{{ baseData?.salesAmount }}</h4>
              </div>
              <img src="@/assets/index_home/sale.png" />
            </div>
          </div>
        </div>
      </div>
      <div class="b-content">
        <p>今日简报</p>
        <div class="b-l-content">
          <div class="basic-data">
            <div class="clue-number">
              <div class="clue-number-title">
                <span>今日新增线索</span>
                <h4>{{ baseData?.todayClueNumber }}</h4>
              </div>
              <img src="@/assets/index_home/today_clue.png" />
            </div>
          </div>
          <div class="basic-data">
            <div class="business-opportunity-number">
              <div class="clue-number-title">
                <span>今日新增商机</span>
                <h4>{{ baseData?.todayCommercialNumber }}</h4>
              </div>
              <img src="@/assets/index_home/today_opport.png" />
            </div>
          </div>
          <div class="basic-data">
            <div class="custom-number">
              <div class="clue-number-title">
                <span>今日新增客户</span>
                <h4>{{ baseData?.todayClientNumber }}</h4>
              </div>
              <img src="@/assets/index_home/today_customer.png" />
            </div>
          </div>
          <div class="basic-data">
            <div class="sale-number">
              <div class="clue-number-title">
                <span>今日销售额</span>
                <h4>{{ baseData?.todaySalesAmount }}</h4>
              </div>
              <img src="@/assets/index_home/today_sale.png" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main-content">
      <div class="l-content-data">
        <div class="l-content">
          <p>待办事项</p>
          <div class="l-l-content">
            <div class="transfer-data">
              <div class="transfer">
                <div class="transfer-title">
                  <span>转派</span>
                  <h4>1</h4>
                </div>
                <img src="@/assets/index_home/transfer.png" />
              </div>
              <div class="transfer">
                <div class="transfer-title">
                  <span>待跟进线索</span>
                  <h4>{{ baseData?.awaitClueNumber }}</h4>
                </div>
                <img src="@/assets/index_home/follow-up_clue.png" />
              </div>
              <div class="transfer">
                <div class="transfer-title">
                  <span>待跟进商机</span>
                  <h4>{{ baseData?.awaitCommercialNumber }}</h4>
                </div>
                <img src="@/assets/index_home/follow-up_opport.png" />
              </div>
              <div class="transfer">
                <div class="transfer-title">
                  <span>待分配线索</span>
                  <h4>{{ baseData?.divideClueNumber }}</h4>
                </div>
                <img src="@/assets/index_home/follow-up_assign_clue.png" />
              </div>
            </div>
            <div class="transfers">
              <div class="transfers-title">
                <span>待分配商机</span>
                <h4>{{ baseData?.divideCommercialNumber }}</h4>
              </div>
              <img src="@/assets/index_home/follow-up_money.png" />
            </div>
          </div>
        </div>
        <div class="r-content">
          <p>线索转化漏斗</p>
          <div class="echarts">
            <Echarts></Echarts>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="l-footer">
        <div class="l-footer-title">
          <p>销售龙虎榜</p>
          <el-table
            :data="tableData"
            :default-sort="{ prop: 'date', order: 'descending' }"
            style="width: 530px"
            draggable="true"
            :header-cell-style="{ backgroundColor: '#eaf1ef' }"
            empty-text="暂无数据"
          >
            <el-table-column type="index" label="排名" width="62">
              <template v-slot="{ $index }">
                <div
                  class="rank-item"
                  :class="{
                    'rank-one': $index === 0,
                    'rank-two': $index === 1,
                    'rank-three': $index === 2
                  }"
                >
                  {{ parseInt($index) + 1 }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="用户姓名" width="80"></el-table-column>
            <el-table-column
              align="center"
              prop="address"
              label="部门"
              width="60"
            ></el-table-column>
            <el-table-column
              prop="clue"
              sortable
              label="线索转化数(个)"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="clues"
              sortable
              label="线索转化占收(%)"
              width="160"
              align="center"
            ></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="r-footer">
        <div class="r-footer-title">
          <p>商机转化龙虎榜</p>
          <el-table
            :data="tableData"
            :default-sort="{ prop: 'date', order: 'descending' }"
            style="width: 515px"
            :header-cell-style="{ backgroundColor: '#eaf1ef' }"
            empty-text="暂无数据"
          >
            <el-table-column type="index" label="排名" width="70">
              <template v-slot="{ $index }">
                <div
                  class="rank-item"
                  :class="{
                    'rank-one': $index === 0,
                    'rank-two': $index === 1,
                    'rank-three': $index === 2
                  }"
                >
                  {{ parseInt($index) + 1 }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="用户姓名" width="80"></el-table-column>
            <el-table-column
              align="center"
              prop="address"
              label="部门"
              width="60"
            ></el-table-column>
            <el-table-column
              prop="clue"
              sortable
              label="商业转化数(个)"
              width="140"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="clues"
              sortable
              label="商机转化率(%)"
              width="140"
              align="center"
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// * {
//   margin: 0;
//   padding: 0;
//   box-sizing: border-box;
// }
:deep(.el-input__wrapper) {
  border-radius: 10px;
  background-color: #f9f9f9;
}
:deep(.el-table__header) {
  width: 530px !important;
}
.rank-item {
  display: inline-block;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  text-align: center;
  padding-top: 3px;
  font-size: 14px;
  font-weight: bold;
  background-color: #d7d7d7;
  color: #787780;
}

.rank-one {
  background-color: #ff3a3c;
  color: #fff;
}

.rank-two {
  background-color: #fd662e;
  color: #fff;
}

.rank-three {
  background-color: #faad1f;
  color: #fff;
}
.dashboard {
  width: 100%;
  .content {
    width: 100%;
    .t-content {
      height: 80px;
      padding: 20px;
      background-color: #fff;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .btn {
        margin-left: 20px;
        display: flex;
        flex: 1;
        align-self: center;
        .el-button {
          width: 80px;
          height: 32px;
          border-radius: 40px;
          margin-right: 50px;
        }
      }
      .t-content-title {
        display: flex;
        align-items: center;
        span {
          margin-right: 10px;
        }
      }
    }
    .b-content {
      padding: 20px 10px 0 10px;
      p {
        font-size: 16px;
        font-weight: 700;
        margin-left: 30px;
      }
      .b-l-content {
        display: flex;
        justify-content: space-around;
        .basic-data {
          cursor: pointer;
          margin-top: 20px;
          padding: 20px;
          width: 260px;
          border: 1px solid transparent;
          background-color: #fff;
          border-radius: 5px;
          .clue-number,
          .business-opportunity-number,
          .custom-number,
          .sale-number {
            display: flex;
            justify-content: space-between;
            align-items: center;
            img {
              width: 50px;
              height: 50px;
            }
          }
          .clue-number-title {
            display: flex;
            flex-direction: column;
            span {
              font-size: 14px;
              color: #989898;
              margin-bottom: 5px;
            }
            h4 {
              font-size: 20px;
              font-weight: bold;
              margin: 0;
            }
          }
        }
        .basic-data:hover {
          border: 1px solid #eaebeb;
          background-color: #f5fdf9;
        }
      }
    }
  }
  .main-content {
    width: 100%;
    margin-top: 20px;
    .l-content-data {
      display: flex;
      justify-content: space-between;
      // justify-content: space-around;
      padding: 0 20px;
      .l-content {
        p {
          font-size: 16px;
          font-weight: 700;
          margin-left: 20px;
        }
        .l-l-content {
          .transfers:hover {
            border: 1px solid #eaebeb;
            background-color: #f5fdf9;
          }
          .transfers {
            cursor: pointer;
            display: flex;
            border: 1px solid transparent;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            img {
              width: 35px;
              height: 35px;
            }
            .transfers-title {
              display: flex;
              flex-direction: column;
              span {
                font-size: 14px;
                color: #989898;
                margin-bottom: 5px;
              }
              h4 {
                font-size: 18px;
                margin: 0;
              }
            }
          }
          .transfer-data {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            width: 524px;
            .transfer {
              cursor: pointer;
              display: flex;
              border: 1px solid transparent;
              justify-content: space-between;
              margin-top: 20px;
              padding: 20px;
              width: 250px;
              background-color: #fff;
              border-radius: 5px;
              img {
                width: 35px;
                height: 35px;
              }
            }
            .transfer:hover {
              background-color: #f5fdf9;
              border: 1px solid #eaebeb;
            }
            .transfer-title {
              display: flex;
              flex-direction: column;
              span {
                font-size: 14px;
                color: #989898;
                margin-bottom: 5px;
              }
              h4 {
                font-size: 16px;
                margin: 0;
              }
            }
          }
        }
      }
      .r-content {
        p {
          font-size: 16px;
          font-weight: 700;
          margin-left: 30px;
        }
        .echarts {
          margin-top: 35px;
          width: 520px;
          height: 282px;
          background-color: #fff;
          border-radius: 5px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
  .footer {
    margin-top: 20px;
    display: flex;
    .l-footer {
      .l-footer-title {
        padding: 0 20px;
        text-align: center;
        p {
          font-size: 16px;
          font-weight: 700;
          margin-left: 20px;
          margin-bottom: 20px;
        }
      }
    }
    .r-footer {
      .r-footer-title {
        padding: 0 20px;
        text-align: center;
        p {
          font-size: 16px;
          font-weight: 700;
          margin-left: 20px;
          margin-bottom: 20px;
        }
      }
    }
  }
}
</style>
